<template>
  <div class="view">
    <div class="search-header">
      <el-form :model="queryParams" :inline="true" ref="queryRef">
        <el-form-item label="状态" prop="status">
          <el-select placeholder="请选择状态" v-model="queryParams.status">
            <el-option
              v-for="dict in order_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button color="#1aa684" icon="Search" @click="handleQuery"
            >搜索
          </el-button>
          <el-button color="#1aa684" plain icon="Refresh" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="list">
      <el-table-column type="selection" width="55" />
      <el-table-column
        label="订单号"
        prop="orderSn"
        width="300"
      ></el-table-column>
      <el-table-column label="订单金额" prop="totalAmount" align="center">
        <template #default="scope">
          <span
            style="
               {
                color: #000;
                text-decoration: line-through;
                font-weight: 600;
              }
            "
            >{{ scope.row.totalAmount }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="实付金额" prop="payAmount" align="center">
        <template #default="scope">
          <span class="price">{{ scope.row.payAmount }}</span>
        </template></el-table-column
      >
      <el-table-column label="订单状态" align="center" prop="status">
        <template #default="scope">
          <dict-tag :options="order_status" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column label="支付方式" align="center" prop="payType">
        <template #default="scope">
          <dict-tag :options="pay_type" :value="scope.row.payType" />
        </template>
      </el-table-column>
      <!-- <el-table-column label="下单时间" prop="createTime"></el-table-column> -->
      <el-table-column label="操作" width="120" align="center">
        <template #default="scope">
          <div
            style="display: flex; flex-direction: column; align-items: center"
          >
            <el-button
              link
              type="success"
              size="small"
              @click="clickInfo(scope.row)"
              v-show="scope.row.status >= 0"
              style="margin-left: 15px"
            >
              详情</el-button
            >
            <el-button
              link
              type="danger"
              size="small"
              @click="delOrder(scope.row)"
              v-show="scope.row.status >= 3"
            >
              删除
            </el-button>
            <el-button
              link
              type="warning"
              size="small"
              v-show="scope.row.status == 0"
              @click="goPayment(scope.row)"
            >
              去付款
            </el-button>
            <el-button
              link
              type="info"
              size="small"
              v-show="scope.row.status == 0"
              @click="closeOrder(scope.row)"
            >
              取消订单
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 详情 -->
    <el-dialog title="订单详情" width="60%" v-model="infoOpen" append-to-body>
      <el-table :data="currOrder.items">
        <el-table-column label="商品" width="500">
          <template #default="scope">
            <div class="order-item">
              <image-preview
                :width="50"
                :height="50"
                :src="scope.row.skuPic"
              ></image-preview>
              <div class="order-attr">
                <div>{{ scope.row.skuName }}</div>
                <div class="attr-list">
                  <div
                    class="attr"
                    v-for="item in formatJSONToObj(scope.row.skuAttrsVals)"
                    :key="item.attrId"
                    v-if="scope.row.skuAttrsVals"
                  >
                    {{ item.attrName }}：{{ item.attrValue }}；
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="单价" prop="skuPrice" align="center">
          <template #default="scope">
            <span
              style="
                 {
                  color: #000;
                  text-decoration: line-through;
                  font-weight: 600;
                }
              "
              >{{ scope.row.skuPrice }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="数量" prop="skuQuantity" align="center"
          ><template #default="scope"> x {{ scope.row.skuQuantity }} </template>
        </el-table-column>
        <el-table-column label="实付" prop="realAmount" align="center">
          <template #default="scope">
            <span class="price">{{ scope.row.realAmount }}</span>
          </template></el-table-column
        >
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              link
              v-if="scope.row.commentAllow == 1"
              type="success"
              size="small"
              @click="addComment(scope.row)"
            >
              去评价
            </el-button>
            <el-button link v-else type="info" size="small" @click="">
              确认收货后可追评
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script setup>
import { listUserOrder, deleteOrder } from "@/api/mall/client/order/order";
import { closeOrderByAlipay } from "@/api/mall/client/order/order";
import { useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const { pay_type, order_status, delete_status, oredr_source_type } =
  proxy.useDict(
    "pay_type",
    "order_status",
    "delete_status",
    "oredr_source_type"
  );
const list = ref([]);
const router = useRouter();
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
const total = ref(0);
const getList = async () => {
  const res = await listUserOrder(queryParams.value);
  list.value = res.rows;
  total.value = res.total;
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
  proxy.resetForm("queryRef");
  handleQuery();
};
// 发布评价
const addComment = (row) => {
  router.push({
    path: "/comment",
    query: {
      spuId: row.spuId,
      skuId: row.skuId,
      orderItemId: row.id,
    },
  });
};
// 详情
const infoOpen = ref(false);
const currOrder = ref({});
const delOrder = (row) => {
  proxy.$modal.confirm("是否删除订单？").then((res) => {
    deleteOrder(row.id).then((res) => {
      proxy.$modal.msgSuccess("删除成功");
      getList();
    });
  });
};
getList();
const clickInfo = (row) => {
  currOrder.value = row;
  infoOpen.value = true;
};
// 付款
const goPayment = (row) => {
  router.push({
    path: "/payment",
    query: {
      orderSn: row.orderSn,
    },
  });
};
// 取消订单
const closeOrder = (row) => {
  proxy.$modal.confirm("是否取消订单？").then(() => {
    closeOrderByAlipay(row.orderSn).then((res) => {
      proxy.$modal.msgSuccess("取消成功");
      getList();
    });
  });
};
// json
const formatJSONToObj = (item) => {
  if (item) {
    return JSON.parse(item);
  } else {
    return [];
  }
};
</script>

<style lang="scss" scoped>
.el-select {
  --el-select-input-hover-border-color: #1aa684;
  --el-select-input-focus-border-color: #1aa684;
  --el-color-primary: #1aa684 !important;
}
:deep(.el-pagination) {
  --el-pagination-hover-color: #1aa684;
  --el-color-primary: #1aa684;
}
:deep(.el-select-dropdown__item.selected) {
  color: #1aa684 !important;
}
.price {
  color: rgb(220, 38, 38);
  font-size: 18px;
}
.order-item {
  display: flex;
  align-items: center;
  .order-attr {
    margin-left: 10px;
    .attr-list {
      display: flex;
      flex-wrap: wrap;
    }

    .attr {
      color: #999;
    }
  }
}
</style>
